<template>
	<view class="page">
		<jnavbar :title="'订单支付'"></jnavbar>
		<view class="uni-flex-column-center price-wrapper">
			<text>支付金额</text>
			<text class="price">￥{{ total }}</text>
		</view>
		<view class="pay_div">
			<view v-for="(item, i) in pay_type_list" class="uni-flex-row uni-flex-title cell" @click="index = i">
				<view class="uni-flex-row">
					<vimage imgtype="1" class="pay_icon" :src="item.src" mode=""></vimage>
					<view class="uni-flex-column">
						<text class="lg-font">{{ item.value }}</text>
						<text v-if="item.type == 'recharge'" class="sm-font">账户可用余额{{ UserInfo.total }}</text>
					</view>
				</view>
				<text v-if="index == i" class="iconfont el-sc-dui"></text>
			</view>
		</view>

		<u-button shape="circle" :loading="loading" :custom-style="customStyle" @click="paymentpay" type="primary">确认支付
		</u-button>

	</view>
</template>

<script>
	var qs = require('qs');
	import util from '@/common/util.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		onShareAppMessage() {
			return this.wxShare();
		},
		data() {
			return {
				total: 0,
				index: 0,
				tmplIds: [],
				loading: false,
				customStyle: {
					width: '560rpx',
					height: '88rpx',
					marginLeft: '95rpx',
					marginTop: '80rpx',
					backgroundColor: '#ff536f'
				},
				pay_type_list: [{
						value: '微信',
						src: 'static/images/wxpay.png',
						type: 'wx',
						pay_type: 2
					},
					{
						value: '余额',
						src: 'static/images/balance.png',
						type: 'recharge',
						pay_type: 1
					}
				]
			};
		},
		async onLoad(e) {
			await this.$getWx
			this.total = e.total;
			this.level = e.level;
			this.getjuris('mallPayMode').then(m => {
				// #ifdef MP-WEIXIN
				let a = m.wechata;
				this.pay_type_list = this.pay_type_list.filter(b => {
					return a[b.type];
				});
				this.wxamessage();
				// #endif
				// #ifdef H5
				let a = m.wechat;
				this.pay_type_list = this.pay_type_list.filter(b => {
					return a[b.type];
				});
				// #endif
			});
			this.userCenter();
		},
		computed: {
			...mapState({
				UserInfo: state => state.userInfo
			})
		},

		methods: {
			userCenter() {
				let params = {};
				this.$http('/user/UserCenter', params, 'GET').then(res => {
					let centerinfo = res.data.msg;
					let myUserInfo = Object.assign({}, this.UserInfo, centerinfo);
					this.$store.commit('setUserInfo', myUserInfo);
				});
			},
			wxamessage() {
				this.$http('/wx/tool/wxa/message/pay', {}, 'GET').then(res => {
					// this.tmplIds = res.data.msg;
					let tmplIds = [];
					// tmplIds.push(res.data.msg[0])
					tmplIds.push(res.data.msg[1]);
					tmplIds.push(res.data.msg[0]);
					this.tmplIds = tmplIds;
				});
			},
			messageresult(data) {
				this.$http('/wx/tool/wxa/message/result', data, 'POST').then(res => {
					this.paymentpay();
				});
			},

			requestSubscribe() {
				var _this = this;
				wx.requestSubscribeMessage({
					tmplIds: _this.tmplIds,
					success(res) {
						// let data=res;
						delete res.errMsg;
						let data = {
							data: JSON.stringify(res)
						};
						_this.messageresult(data);
					},
					fail(res) {
						_this.paymentpay();
						console.log(res);
					},
					complete(res) {
						console.log(res);
					}
				});
			},

			//获取支付参数
			paymentpay() {
				let _this = this;
				if (this.loading) {
					return false;
				}
				this.loading = true;
				if (!this.pay_type_list[this.index]) {
					uni.showToast({
						title: '商家未配置支付方式！',
						icon: 'none'
					});
					return;
				}
				this.type = this.pay_type_list[this.index].pay_type;
				var data = {
					level: this.level,
					type: this.type
				};
				setTimeout(() => {
					_this.loading = false;
				}, 1500);
				this.$http('/payment/membership', data, 'POST').then(res => {
					const json = res.data.msg;
					if (res.statusCode == 200) {
						if (this.type == 1) {
							this.payback();
						} else {
							// #ifdef MP-WEIXIN
						if(json.mode==1){
							uni.requestPayment({
								provider: 'wxpay',
								appId: json.appId,
								timeStamp: json.timeStamp,
								nonceStr: json.nonceStr,
								package: json.package,
								signType: json.signType,
								paySign: json.paySign,
								success: function(res) {
									_this.payback();
								},
								fail: function(err) {}
							});
						}else{
							wx.requestOrderPayment({
								provider: 'wxpay',
								appId: json.appId,
								timeStamp: json.timeStamp,
								nonceStr: json.nonceStr,
								package: json.package,
								signType: json.signType,
								paySign: json.paySign,
								success: function(res) {
									_this.payback();
								},
								fail: function(err) {}
							})
						}
							// #endif
							// #ifdef H5
							util.wxPublicPay(json, this.payback);
							// #endif
						}
					} else {
						uni.showModal({
							title: '提示',
							content: json,
							showCancel: false
						});
					}
				});
			},
			payback() {
				this.Jumpurl({
					type: 1,
					link: '../afterpay/afterpay?total=' + this.total + '&type=' + this.type
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background: #fff;
		height: 100vh;
	}

	.price-wrapper {
		background-color: #fff;
		height: 260rpx;
		font-size: 28rpx;
		color: #909399;
		justify-content: center;

		.price {
			font-size: 56rpx;
			color: #333;
			margin-top: 20rpx;
			font-weight: 600;
		}
	}

	.pay_div {
		padding: 0 80rpx;

		.cell {
			height: 124rpx;
			position: relative;

			&::after {
				position: absolute;
				z-index: 3;
				left: 0;
				top: auto;
				bottom: 0;
				right: 0;
				height: 0;
				content: '';
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
				border-bottom: 1px solid #e0e0e0;
			}

			.lg-font {
				font-weight: bold;
			}

			.sm-font {
				color: #999;
				margin-top: 14rpx;
			}
		}
	}

	.pay_icon {
		width: 44rpx;
		height: 44rpx;
		margin-right: 32rpx;
	}

	.el-sc-dui {
		font-size: 36rpx;
		color: #ff536f;
	}
</style>
